/**
 * 组件通信：props基本使用
 */


import React, { Component } from 'react';


// 函数子组件
const Fnc = (props) => {
  console.log('接收数据：', props);
  // props.b = 1313;
  return (
    <div>
      <h2>函数组件</h2>
      <p>{props.abc}</p>
      <p>{props.tpl}</p>
    </div>
  )
}

// 类组件
class Child extends Component {
  constructor(props) {
    super(props);
    console.log('constructor类组件接收数据：', this.props)
  }



  render() {
    console.log('类组件接收数据：', this.props)
    // this.props.c = 200;
    return (
      <div>
        <h2>类组件</h2>
        <p>{this.props.c}</p>
        <button onClick={this.props.fn}>调用父组件传递的方法</button>
      </div>
    );
  }
}



// 父组件
class Index extends Component {

  state = {
    a: 1,
    arr: []
  }

  // 方法
  fn = () => {
    console.log(this.state.a)
  }

  render() {
    return (
      <div>
        <h1>组件通信：props基本使用</h1>
        <hr />
        <div>
          <Fnc abc={this.state.a} tpl={<span>123</span>} b='1212' c={1200} />
        </div>
        <Child abc={this.state.arr} fn={this.fn} b='1212' c={1200} />
      </div>
    );
  }
}

export default Index;